<template>
  <div class="user-notice-summary">
    <div class="search-form">
      <el-form :model="searchForm" ref="searchForm" inline>
        <el-form-item prop="realname" label="姓名">
          <el-input v-model="searchForm.realname" clearable />
        </el-form-item>

        <el-form-item prop="deptIdList" label="部门">
          <el-cascader
            clearable
            filterable
            :options="deptTree"
            v-model="searchForm.deptIdList"
            :props="{
              label: 'name',
              value: 'id',
              checkStrictly: true
            }">
              <template slot-scope="{node, data}">
                <span>{{ data.name }}</span>
              </template>
          </el-cascader>
        </el-form-item>

        <el-form-item prop="readStatus" label="阅读状态">
          <el-select v-model="searchForm.readStatus" placeholder="请选择">
            <el-option label="全部" :value="0" />
            <el-option label="已阅读" :value="1" />
            <el-option label="未阅读" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button-group>
            <el-button type="primary" @click="search()" icon="el-icon-search">搜索</el-button>
            <el-button @click="cancelSearch()" icon="el-icon-close">取消搜索</el-button>
          </el-button-group>

          <el-button type="primary" icon="el-icon-download" @click="exportExcel()" style="marginLeft:20px">导出</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table style="marginTop:20px" :data="noticeList" height="500" v-loading="loading">
      <el-table-column align="center" type="index" label="序号" />
      <el-table-column align="center" prop="realname" label="姓名" />
      <el-table-column align="center" prop="deptName" label="部门" />
      <el-table-column align="center" prop="noticeTitle" label="公告标题" />
      <el-table-column align="center" prop="readStatus" label="阅读状态">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.readStatus">已阅读</el-tag>
          <el-tag size="small" type="danger" v-else>未阅读</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="发布时间" />
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="marginTop:20px"
      @size-change="pageSizeChange"
      @current-change="pageIndexChange"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      :total="totalCount"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
import {exportUserNotice} from './export-excel'
export default {
  name: 'userNoticeSummary',
  props: {
    noticeId: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      searchForm: {
        realname: null,
        deptId: null,
        readStatus: 0,
        deptIdList: []
      },
      noticeList: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      loading: false
    }
  },
  methods: {
    async search () {
      this.loading = true
      this.pageIndex = 1
      let res = await this.$http.post('/news-admin/sta/notice/user', {
        noticeId: this.noticeId,
        page: this.pageIndex,
        limit: this.pageSize,
        realname: this.searchForm.realname,
        deptId: this.searchForm.deptId,
        readStatus: this.searchForm.readStatus
      })
      this.noticeList = res.data.list
      this.totalCount = res.data.totalCount
      this.loading = false
    },
    cancelSearch () {
      this.$refs.searchForm.resetFields()
      this.pageIndex = 1
      this.loadUserNoticeList()
    },
    async loadUserNoticeList () {
      this.loading = true
      let res = await this.$http.post('/news-admin/sta/notice/user', {
        noticeId: this.noticeId,
        page: this.pageIndex,
        limit: this.pageSize,
        readStatus: 0
      })
      this.noticeList = res.data.list
      this.totalCount = res.data.totalCount
      this.loading = false
    },
    pageSizeChange (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.loadUserNoticeList()
    },
    pageIndexChange (val) {
      this.pageIndex = val
      this.loadUserNoticeList()
    },
    back () {
      this.$emit('back')
    },
    async exportExcel () {
      let res = await this.$http.post('/news-admin/sta/notice/user', {
        noticeId: this.noticeId,
        page: 1,
        limit: 9999,
        readStatus: 0
      })
      let list = res.data.list
      list.forEach(x => {
        if (x.readStatus) {
          x.readStatus = '已阅读'
        } else {
          x.readStatus = '未阅读'
        }
      })
      exportUserNotice(list)
    }
  },
  created () {
    this.$store.dispatch('user/loadDeptList')
  },
  mounted () {
    this.loadUserNoticeList()
  },
  computed: {
    deptTree () {
      return this.$store.getters['user/deptTree']
    }
  },
  watch: {
    'searchForm.deptIdList' (val) {
      if (val.length > 0) {
        this.searchForm.deptId = val[val.length - 1]
      } else {
        this.searchForm.deptId = null
      }
    }
  }
}
</script>
